<template>

  <div class="app-container">
    <el-form :inline="true" :model="roomVoCondition" class="demo-form-inline">
      <el-form-item label="小区名">
        <el-input v-model="roomVoCondition.quartersName" placeholder="请输入小区名称"></el-input>
      </el-form-item>

      <el-form-item label="业主">
        <el-input v-model="roomVoCondition.ownerName" placeholder="请输入业主姓名"></el-input>
      </el-form-item>

      <el-form-item label="支付状态">
        <el-select v-model="roomVoCondition.status" placeholder="全部账单">
          <el-option label="已支付" value="1"></el-option>
          <el-option label="未支付" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchRoom()">查询</el-button>
        <el-button type="success" @click="editNow()">付款今日到期</el-button>
      </el-form-item>
    </el-form>

    <el-button type="danger" @click="statusMore()">一键付款</el-button>
    <el-table
      :data="incomeList"
      stripe
      style="width: 100%"
      @selection-change="selectionCheckBox">
      <el-table-column
        type="selection"

        width="55">
      </el-table-column>

      <el-table-column
        prop="id"
        label="id"
        width="70">
      </el-table-column>

      <el-table-column
        prop="oname"
        label="业主姓名"
        width="120">
      </el-table-column>

      <el-table-column
        prop="qname"
        label="托管房源小区"
        width="120">
      </el-table-column>

      <el-table-column
        prop="build"
        label="楼栋"
        width="80">
      </el-table-column>


      <el-table-column
        prop="number"
        label="房号"
        width="80">
      </el-table-column>

      <el-table-column
        prop="rent"
        label="租金"
        width="70">
      </el-table-column>


      <el-table-column
        prop="startTime"
        label="付款周期">
      </el-table-column>

      <el-table-column
        prop="endTime"
        label="付款时间">
      </el-table-column>

      <el-table-column
        prop="status"
        label="支付状态">
        <template slot-scope="scope">
          <span style="color: red" v-if="scope.row.status == 1">已支付</span>
          <span style="color:green;" v-if="scope.row.status == 0">未支付</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="160"
        align="center"
      >
        <template slot-scope="scope">


          <el-button
            v-if="scope.row.status==0"
            type="waring" round
            size="small"
            @click="editIncome(scope.row.id,scope.row.status)"
          >
            付款
          </el-button>
        </template>
      </el-table-column>


    </el-table>

    <div class="block">

      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5,10,15,20]"
        :page-size="size"
        :total="total"
        :current-page.sync="num">
      </el-pagination>
    </div>


  </div>
</template>


<script>


import Income from "@/api/income";

export default {
  name: "list",
  data() {
    return {
      editForm: {
        id: '',
        status: '',
      },
      ids: [],
      roomId: 0,
      num: 1,
      size: 10,
      total: 0,
      incomeList: [],
      roomVoCondition: {
        quartersName: '',
        ownerName: '',
        status: ''
      }

    }
  },
  created() {
    this.initIncome();
  },
  methods: {

    editIncome(id, status) {

      this.$confirm('此操作将直接给业主付款, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.editForm.id = id
        this.editForm.status = status;
        Income.edit(this.editForm).then(res => {
          this.initIncome()
        })

        this.$message({
          type: 'success',
          message: '付款成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消付款'
        });
      });
    },
    editNow() {

      this.$confirm('此操作将直接给业主付款, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Income.editNow().then(res => {
          this.initIncome()
        })
        this.$message({
          type: 'success',
          message: '付款成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消付款'
        });
      });
    },
    handleCurrentChange(num) {
      this.num = num
      this.initIncome()
    },
    handleSizeChange(size) {
      this.num = 1
      this.size = size
      this.initIncome()

    },

    selectionCheckBox(arr){
      this.ids = [] ;
      console.log(arr)
      for (let o of arr){
        this.ids.push(o.id);
      }
    },
    statusMore(){
      if (this.ids.length > 0) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids=this.ids+""
          alert(ids)
          Income.statusMore(ids).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
              duration: 1000
            });
            this.initIncome();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        alert("请至少选一个!");
      }
    }

    ,


    searchRoom()
{
  console.log(this.roomVoCondition)
  this.initIncome();
}
,
initIncome()
{
  Income.getList(this.num, this.size, this.roomVoCondition)
    .then(res => {
      const {data} = res;
      this.incomeList = data.incomeList.list
      this.num = data.incomeList.pageNum;
      this.size = data.incomeList.pageSize;
      this.total = data.incomeList.total;
    })
}
}
}
</script>

